<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <svg viewBox="0 0 100 100" width="400" height="400">
        <circle cx="30" cy="30" r="10" fill="#f00">
            <animate 
                attributeName="cx"
                values="30;90;30"
                keyTimes="0;0.25;1"
                calcMode="paced"
                dur="2s"
                fill="freeze"/>
        </circle>
    </svg>

    <svg viewBox="0 0 100 100" width="400" height="400">
        <circle cx="30" cy="30" r="10" fill="#f00">
            <animate 
                attributeName="cx"
                values="30;90;30;90;30"
                keyTimes="0;0.25;0.5;0.75;1"
                calcMode="discrete"
                dur="4s"
                fill="freeze"/>
        </circle>
    </svg>

    <svg viewBox="0 0 100 100" width="400" height="400">
        <circle cx="30" cy="30" r="10" fill="#f00">
            <animate 
                attributeName="cx"
                values="30;90"
                
                calcMode="spline"
                keySplines="0 1 1 0"
                dur="4s"
                fill="freeze"/>
        </circle>
    </svg>

    <svg viewBox="0 0 100 100" width="400" height="400">
        <path d="M0 0 L 100 100" fill="none" stroke="#fac" stroke-width="1" />
        <path d="M0 0 C0 50,100 50,100 100" fill="none" stroke="#F00" stroke-width="1" />
        <path d="M0 0 C0 100,100 0,100 100" fill="none" stroke="#0f0" stroke-width="1" />
        <path d="M0 0 C100 0,0 100,100 100" fill="none" stroke="#00f" stroke-width="1" />
    </svg>
   
    <script src="index.js"></script>
</body>
</html>